<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
    aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">

        <div class="modal-content">

            <form *ngIf="active" #pictureForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">

                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span *ngIf="picture.id">修改图片: {{picture.title}}</span>
                        <span *ngIf="!picture.id">创建新图片</span>
                    </h4>
                </div>

                <div class="modal-body">
                    <tabset class="tab-container tabbable-line">
                        <tab heading="图片信息">

                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <input type="text" name="title" class="form-control" [ngClass]="{'edited':picture.title}" [(ngModel)]="picture.title" required
                                    maxlength="256">
                                <label>标题</label>
                            </div>

                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <input type="text" name="description" class="form-control" [ngClass]="{'edited':picture.description}" [(ngModel)]="picture.description"
                                    required maxlength="256">
                                <label>描述</label>
                            </div>
                            <!-- <div class="md-checkbox">
                                <input id="EditUser_IsActive" class="md-check" type="checkbox" name="publishRemark" [(ngModel)]="picture.publishRemark">
                                <label for="EditUser_IsActive">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    是否发布
                                </label>
                            </div> -->


                        </tab>
                        <tab heading="图片上传">
                                <!--  multiple="multiple" maxFileSize="1000000" -->
                            <p-fileUpload  name="DefaultFileUploadFileInput[]" [url]="uploadUrl"  accept="image/*"
                                (onUpload)="onUpload($event)" (onBeforeSend)="onBeforeSend($event)">

                                <ng-template pTemplate="content">
                                    <ul *ngIf="uploadedFiles.length">
                                        <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                                    </ul>
                                </ng-template>
                            </p-fileUpload>
                        </tab>
                        <!-- <tab>
                            <ng-template tabHeading>
                                选择标签
                            </ng-template>

                            <div class="row" >
                                <div class="col-md-4" >
                                    <i>已选择的</i><br>
                                    <span class="label label-success" *ngFor="let item of choosedTags" (click)="removeTag(item)">{{item.name}}</span> 
                                </div>
                                <div class="col-md-8" >
                                    <i>可选的</i><br>
                                    <span class="label label-info" *ngFor="let tag of tags" (click)="chooseTag(tag)">{{tag.name}}</span> 
                                </div>
                            </div>
                        </tab> -->
                    </tabset>
                </div>

                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" class="btn btn-primary blue" [disabled]="!pictureForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i>
                        <span>{{l("Save")}}</span>
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
